<template>
    <div class="search-box flex middle">
   <i class="iconfont icon-Search xxl hui"></i>
   <input ref="query" v-model='query' type="text" class="inp l cell-main" :placeholder="placeholder">
   <i @click="clear" v-show="query" class="iconfont icon-close close xxl"></i>
    </div>
</template>

<script type="text/ecmascript-6">
import {debounce} from 'common/js/util'
export default{
  name:'',
  data(){
   return{
   	query:''
  }
},
props:{
placeholder:{
	type:String,
	default:'搜索歌曲、歌手'
}
},
methods:{
// 清空
clear(){
	this.query=''
},
// 设置值
setQuery(query){
this.query=query
},
blur(){
  this.$refs.query.blur()
}
},
// 派发输入事件
created(){
  // 监听query 并节流
this.$watch('query',debounce((newQuery)=>{
	this.$emit('query',newQuery)
},200))
},

  components:{}
}
</script>

<style rel="stylesheet" lang="less">
    .search-box{
    	padding: 0 6px;
    	box-sizing: border-box;
    	border-radius: 6px;
    	height: 40px;
    	width: 100%;
    	background-color: #333;
    }
    .inp{
		margin: 0 5px;
      line-height: 18px;
      color:#fff;
      background-color: #333;
      &::placeholder{
              color: #999;
      }

    }
.close{
	color: #666;
}

</style>
